<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <!--解决在 HTTPS 承载的页面上不允许出现 http 请求 但还有冲突 -->
{#    <meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />#}
    <title>物联网iot工具 </title>
    <!-- plugins:css -->
    <link rel="stylesheet" href="/static/assets/vendors/feather/feather.css">
{#    <link rel="stylesheet" href="/static/assets/vendors/mdi/css/materialdesignicons.min.css">#}
    <link rel="stylesheet" href="/static/assets/vendors/ti-icons/css/themify-icons.css">
    <link rel="stylesheet" href="/static/assets/vendors/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="/static/assets/vendors/typicons/typicons.css">
    <link rel="stylesheet" href="/static/assets/vendors/simple-line-icons/css/simple-line-icons.css">
    <link rel="stylesheet" href="/static/assets/vendors/css/vendor.bundle.base.css">
    <link rel="stylesheet" href="/static/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.css">
    <!-- endinject -->
    <!-- Plugin css for this page -->
    <link rel="stylesheet" href="/static/assets/vendors/datatables.net-bs4/dataTables.bootstrap4.css">
    <link rel="stylesheet" type="text/css" href="/static/assets/js/select.dataTables.min.css">
    <!-- End plugin css for this page -->
    <!-- inject:css -->
    <link rel="stylesheet" href="/static/assets/css/style.css">
    <!-- endinject -->
    <link rel="shortcut icon" href="/static/images/favicon.png"/>

    <!-- 引入jsTree的CSS和JS文件 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/themes/default/style.min.css"/>

    <style>
        /* 去掉节点前的图标 */
        {#.jstree-icon {#}
        {#    display: none !important;#}
        {#    border-color: red;#}
        {# }#}

        /* 如果你想要去掉连接线，可以加上以下CSS */
        {#.jstree-no-dots:before {#}
        {#    content: none;#}
        {# }#}
        {#@media (max-width: 480px) {#}
        {#    .jstree-wholerow .jstree-wholerow-hovered {#}
        {#        background: #eef2f5;#}
        {#        color: #333;#}
        {#    }#}
        {# }#}
        {##}
        {#.jstree-wholerow .jstree-wholerow-hovered {#}
        {#    background: #eef2f5;#}
        {#    color: #333;#}
        {# }#}

        .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:hover {
            background-color: black; /* 鼠标悬停时的颜色 */
        {#color: blue;#}
        }

        .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link:focus, .nav-link:active {
            background-color: black; /* 鼠标离开时的颜色 */
        {#color: blue;#}
        }

        .sidebar .nav:not(.sub-menu) > .nav-item > .nav-link[aria-expanded=true] {
            background: black; /* 竖导航栏展开时的颜色 */
        {#color: #1F3BB3;#}
        }

        .jstree-anchor:hover {
            background: black;
        }

        .jstree-anchor:focus {
            background: black;
        }

    </style>

    {% block style %} {% endblock %}
</head>

<body class="with-welcome-text" style="background-color: #222;">

<!-- 导航 + main-->
<div class="container-scroller">
    <!-- 导航partial:partials/_navbar.html -->
    <nav class="navbar default-layout col-lg-12 col-12 p-0 fixed-top d-flex align-items-top flex-row">

        <!-- 左侧导航三横杆+物联网iot -->
        <div class="text-center navbar-brand-wrapper d-flex align-items-center justify-content-start"
             style="background-color: #2c2d2f; height: 97px">
            <div class="me-3" style="color: white">
                <button class="navbar-toggler navbar-toggler align-self-center" type="button" data-bs-toggle="minimize">
                    <span class="icon-menu"></span>
                </button>
            </div>
            <div>
                <a class="navbar-brand brand-logo" href="#">
                    <p class="text-info fs-5 mt-1"> 物联网iot </p>
                </a>
            </div>
        </div>

        <!-- 右侧导航部分 -->
        <div class="navbar-menu-wrapper d-flex align-items-top" style="background-color: #2c2d2f; height: 97px">
            <ul class="navbar-nav ms-auto m-0">
                <!-- 右侧：打赏 小屏幕时-->
                <li class="nav-item m-auto p-0">
                    <!-- target="_self"在本窗口打开, _blank新起一个窗口打开 -->
                    <a href="{% url 'reward' %}" target="_self" class="text-success" style="text-decoration: none;">
                        打赏
                    </a>
                </li>
                <!-- 右侧：打赏 大屏时-->
                <li class="nav-item m-auto p-0 d-none d-sm-block">
                    <!-- target="_self"在本窗口打开, _blank新起一个窗口打开 -->
                    <a href="{% url 'reward' %}" target="_self" class="text-success" style="text-decoration: none;">
                        如果你觉得好用,就点击给我打赏吧...
                    </a>
                </li>
                <!-- 右侧：选择功能 -->
                <li class="nav-item dropdown">  <!--d-none d-lg-block-->
                    <a class="nav-link dropdown-bordered  dropdown-toggle-split text-center fs-6" id="messageDropdown"
                       href="#" data-bs-toggle="dropdown" aria-expanded="false"> 选择功能 </a>
                    <!-- dropdown-toggle向下箭头 -->
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0 bg-light"
                         aria-labelledby="messageDropdown">
                        <a class="dropdown-item py-3">
                            <p class="mb-0 fw-medium float-start">↓请选择您想要使用的功能↓</p>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item preview-item" href="{% url 'setup' %}">
                            <div class="preview-item-content flex-grow py-2">
                                <p class="preview-subject ellipsis fw-medium text-primary fs-6">设置 </p>
                                <p class="fw-light small-text mb-0">可以增加减少设备及其功能定义的模块</p>
                            </div>
                        </a>
                        <a class="dropdown-item preview-item">
                            <div class="preview-item-content flex-grow py-2">
                                <p class="preview-subject ellipsis fw-medium text-primary fs-6">MQTT调试</p>
                                <p class="fw-light small-text mb-0">可以通过mqtt协议,调试设备是否能连通平台</p>
                            </div>
                        </a>
                        <a class="dropdown-item preview-item">
                            <div class="preview-item-content flex-grow py-2">
                                <p class="preview-subject ellipsis fw-medium text-primary fs-6">数据</p>
                                <p class="fw-light small-text mb-0">可以查看各设备的运行数据</p>
                            </div>
                        </a>
                    </div>
                </li>
                <!-- 右侧：日期选择器 -->
                <li class="nav-item d-none d-lg-block">
                    <div id="datepicker-popup" class="input-group date datepicker navbar-date-picker">
                        <span class="input-group-addon input-group-prepend border-right">
                          <span class="icon-calendar input-group-text calendar-icon"></span>
                        </span>
                        <label>
                            <input type="text" class="form-control p-2">
                        </label>
                    </div>
                </li>
                <!-- 右侧：搜索 -->
                <li class="nav-item d-none d-lg-block">
                    <form class="search-form" action="#">
                        <i class="icon-search text-light"></i>
                        <input type="search" class="form-control text-success" placeholder="搜索" title="Search here">
                    </form>
                </li>
                <!-- 右侧：钟形提示器 -->
                <li class="nav-item dropdown d-none d-lg-block">
                    <a class="nav-link count-indicator" id="notificationDropdown" href="#" data-bs-toggle="dropdown">
                        <i class="icon-bell text-light"></i>
                        <span class="count"></span>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0"
                         aria-labelledby="notificationDropdown">
                        <a class="dropdown-item py-3 border-bottom">
                            <p class="mb-0 fw-medium float-start">您有4个新通知 </p>
                            <span class="badge badge-pill badge-primary float-end">查看全部</span>
                        </a>
                        <a class="dropdown-item preview-item py-3">
                            <div class="preview-thumbnail">
                                <i class="mdi mdi-alert m-auto text-primary"></i>
                            </div>
                            <div class="preview-item-content">
                                <h6 class="preview-subject fw-normal text-dark mb-1">应用程序错误</h6>
                                <p class="fw-light small-text mb-0"> 刚才 </p>
                            </div>
                        </a>
                        <a class="dropdown-item preview-item py-3">
                            <div class="preview-thumbnail">
                                <i class="mdi mdi-lock-outline m-auto text-primary"></i>
                            </div>
                            <div class="preview-item-content">
                                <h6 class="preview-subject fw-normal text-dark mb-1">设置</h6>
                                <p class="fw-light small-text mb-0"> 隐私信息 </p>
                            </div>
                        </a>
                        <a class="dropdown-item preview-item py-3">
                            <div class="preview-thumbnail">
                                <i class="mdi mdi-airballoon m-auto text-primary"></i>
                            </div>
                            <div class="preview-item-content">
                                <h6 class="preview-subject fw-normal text-dark mb-1">新用户注册</h6>
                                <p class="fw-light small-text mb-0"> 2天前 </p>
                            </div>
                        </a>
                    </div>
                </li>
                <!-- 右侧：邮件提示 -->
                <li class="nav-item dropdown d-none d-lg-block">
                    <a class="nav-link count-indicator" id="countDropdown" href="#" data-bs-toggle="dropdown"
                       aria-expanded="false">
                        <i class="icon-mail icon-lg text-light"></i>
                    </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown preview-list pb-0"
                         aria-labelledby="countDropdown">
                        <a class="dropdown-item py-3">
                            <p class="mb-0 fw-medium float-start">您有7封未读邮件 </p>
                            <span class="badge badge-pill badge-primary float-end">查看全部</span>
                        </a>
                        <div class="dropdown-divider"></div>
                        <a class="dropdown-item preview-item">
                            <div class="preview-thumbnail">
                                <img src="/static/images/faces/face10.jpg" alt="image"
                                     class="img-sm profile-pic">
                            </div>
                            <div class="preview-item-content flex-grow py-2">
                                <p class="preview-subject ellipsis fw-medium text-dark">发信者·您 </p>
                                <p class="fw-light small-text mb-0"> 会议取消 </p>
                            </div>
                        </a>
                        <a class="dropdown-item preview-item">
                            <div class="preview-thumbnail">
                                <img src="/static/images/faces/face12.jpg" alt="image"
                                     class="img-sm profile-pic">
                            </div>
                            <div class="preview-item-content flex-grow py-2">
                                <p class="preview-subject ellipsis fw-medium text-dark">发信者·我 </p>
                                <p class="fw-light small-text mb-0"> 今晚聚餐 </p>
                            </div>
                        </a>
                        <a class="dropdown-item preview-item">
                            <div class="preview-thumbnail">
                                <img src="/static/images/faces/face1.jpg" alt="image" class="img-sm profile-pic">
                            </div>
                            <div class="preview-item-content flex-grow py-2">
                                <p class="preview-subject ellipsis fw-medium text-dark">发信者·她 </p>
                                <p class="fw-light small-text mb-0"> 公司放假一天 </p>
                            </div>
                        </a>
                    </div>
                </li>
                <!-- 右侧：头像提示内容 -->
                <li class="nav-item dropdown user-dropdown">
                    <a class="nav-link" id="UserDropdown" href="#" data-bs-toggle="dropdown" aria-expanded="false">
                        <img class="img-xs rounded-circle" src="/static/images/faces/face8.jpg"
                             alt="Profile image"> </a>
                    <div class="dropdown-menu dropdown-menu-right navbar-dropdown" aria-labelledby="UserDropdown">
                        <div class="dropdown-header text-center">
                            <img class="img-md rounded-circle" src="/static/images/faces/face8.jpg"
                                 alt="Profile image">
                            <p class="mb-1 mt-3 fw-semibold">Allen Moreno</p>
                            <p class="fw-light text-muted mb-0">allenmoreno@gmail.com</p>
                        </div>
                        <a class="dropdown-item" href="{% url 'logout' %}">
                            <i class="dropdown-item-icon mdi mdi-account-outline text-primary me-2"></i> 登录
                            {# <span class="badge badge-pill badge-danger">1</span>#}
                        </a>

                        <a class="dropdown-item">
                            <i class="dropdown-item-icon mdi mdi-message-text-outline text-primary me-2"></i> 信息
                        </a>

                        <a class="dropdown-item">
                            <i class="dropdown-item-icon mdi mdi-calendar-check-outline text-primary me-2"></i> 活动
                        </a>

                        <a class="dropdown-item"><i
                                class="dropdown-item-icon mdi mdi-help-circle-outline text-primary me-2"></i>
                            常问问题</a>

                        <a class="dropdown-item" href="{% url 'logout' %}"><i
                                class="dropdown-item-icon mdi mdi-power text-primary me-2"></i>退出</a>
                    </div>
                </li>
            </ul>
            <!-- 小屏时，三横杆点击事件 -->
            <button class="navbar-toggler navbar-toggler-right d-lg-none align-self-center" type="button"
                    data-bs-toggle="offcanvas">
                <span class="mdi mdi-menu text-white icon-menu"></span>  <!--mdi mdi-menu-->
            </button>
        </div>
    </nav>
    <!-- 左下侧导航栏+右侧主体部分 -->
    <div class="container-fluid page-body-wrapper">
        <!-- 左侧导航栏 -->
        <nav class="sidebar sidebar-offcanvas" id="sidebar" style="background-color: #2c2d2f;">
            <ul class="nav">
                <li class="nav-item nav-category p-0"></li>  <!-- 一根暗线 -->
                <li class="nav-item pt-1">
                    <a class="nav-link collapse " data-bs-toggle="collapse" href="#ui-basic" aria-expanded="false"
                       aria-controls="ui-basic">
                        <i class="menu-icon mdi mdi-floor-plan text-warning"></i>  <!-- 左边图标 -->
                        <span class="menu-title text-warning" style="font-size: 18px; left: 0">设备</span>
                        <i class="menu-arrow "></i>  <!-- 右边图标箭头 -->
                    </a>
                    <div class="collapse show" id="ui-basic">
                        <div id="jstree" class="text-light"></div>
                    </div>

                </li>
            </ul>
        </nav>
        <!-- 右侧main主体部分 -->
        {% block main %}{% endblock %} {#占位代码块#}
    </div>
</div>

</body>

<!-- container-scroller -->
<!-- plugins:js -->
<script src="/static/assets/vendors/js/vendor.bundle.base.js"></script>  <!-- 官方原有的，有红色警告，日期和功能选择用到 -->
<script src="/static/assets/vendors/bootstrap-datepicker/bootstrap-datepicker.min.js"></script>
<!-- endinject -->
<!-- Plugin js for this page -->
<script src="/static/assets/vendors/chart.js/chart.umd.js"></script>
<script src="/static/assets/vendors/progressbar.js/progressbar.min.js"></script>
<!-- End plugin js for this page -->
<!-- inject:js -->
<script src="/static/assets/js/off-canvas.js"></script>
<script src="/static/assets/js/template.js"></script>
<script src="/static/assets/js/settings.js"></script>
<script src="/static/assets/js/hoverable-collapse.js"></script>
<script src="/static/assets/js/todolist.js"></script>
<!-- endinject -->
<!-- Custom js for this page-->
<script src="/static/assets/js/jquery.cookie.js" type="text/javascript"></script>
{#<script src="/static/assets/js/dashboard.js"></script>#}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.3.12/jstree.min.js"></script>

<script>
    $(document).ready(function () {
        $("#jstree").jstree({
            "core": {
                "themes": {
                    "dots": true,
                    "icons": true,//是否显示节点的图标
                    "ellipsis": true,//节点名过长时显示省略号。
                },
                "data": function (node, callback) {
                    // 根据节点信息进行异步请求
                    $.ajax({
                        url: "/setup/mySelectPlat/", // 服务器端点
                        type: "get",
                        data: {pid: '左边树状结构', cs: 13},
                        success: function (data) {
                            if (data.status) {
                                callback(data.data); // 将获取到的数据返回给 jsTree
                            } else {
                                $("#j1_loading").html("<span class='ms-5 p'>暂无设备</span>")
                                {#callback(data.data);#}
                                {#alert('无数据')#}
                            }
                        },
                        error: function (xhr, status, error) {
                            // 请求失败时的回调函数
                            console.log('请求失败:');
                        }
                    });
                }
            },
        })
            //点击时触发
            .on('changed.jstree', function (e, obj) {
                let nodes = obj.node
                let text = nodes.text
                let id = nodes.id

                let href = obj.node.original.href
                if (href.includes('/iot/connect/')) {
                    let data = '?text=' + text + '&id=' + id;
                    location.href = href + data  // 到连接iot平台页面
                }
            })
            //加载完成后触发
            .on('load_node.jstree', function (e, obj) {
                let nodes = obj.node;
            })

    });

</script>


<!-- js部分 -->
{% block js %}{% endblock %} {#占位代码块#}

</html>
